<template>
  <el-row>
    <el-col :span="6">
      <el-autocomplete
        class="inline-input"
        v-model="value"
        :fetch-suggestions="querySearch"
        placeholder="车牌号/客户名称/客户手机号/会员卡号"
        :trigger-on-focus="false"
        :debounce="1000"
        @select="handleSelect"
        :disabled="disabled"
        v-loading="loading"
      >
        <template slot-scope="{ item }">
          <div>
            <el-tag>{{ item.name }}</el-tag>
            <el-tag type="success">{{ item.phone }}</el-tag>
            <el-tag type="info">{{ item.custmerType }}</el-tag>
          </div>
        </template>
      </el-autocomplete>
    </el-col>
    <el-col
      :span="4"
      v-if="addCustomer"
    >
      <el-button
        icon="el-icon-plus"
        type="primary"
        @click="handleDataInsert"
        :disabled="disabled"
      >新增客户</el-button>
    </el-col>
    <el-dialog
      v-if="visible"
      :visible="visible"
      width="1610px"
      @close="dialogClose"
      :before-close="handleClose"
    >
      <CreateClient @clientForm="clientForm" />
    </el-dialog>
    <el-dialog
      v-if="carVisible"
      :visible="carVisible"
      @close="carVisibledialogClose"
    >
      <div>
        <div>该客户下有多辆车信息,请选择!</div>
        <el-table
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column
            property="licensePlateNumber"
            label="车牌号"
          >
          </el-table-column>
          <el-table-column
            property="carModelName"
            label="车型"
          > </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="carVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="checkCar"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
import CreateClient from "../CreateClient/index";
import {
  clientSelect,
  getClientById,
  findMemberById,
} from "@/api/after-sale/client/client";
export default {
  components: {
    CreateClient,
  },
  props: {
    //是否显示新增按钮
    addCustomer: {
      type: Boolean,
      default: true,
    },
    showValue: {
      type: String,
      default: () => {
        return "";
      },
    },
    //是否单选车辆 默认false
    singleChoice: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      value: "",
      visible: false,
      carVisible: false,
      checkRow: {}, //选中车辆行
      tableData: [], //车辆信息
      userInfo: {}, //客户详细信息
      loading: false,
    };
  },
  watch: {
    showValue: function (newValue, oldValue) {
      this.value = newValue;
    },
  },
  created () {
    if (this.showValue) {
      this.value = this.showValue;
    }
  },
  methods: {
    //车辆确定
    checkCar () {
      this.userInfo.cars = this.checkRow;
      this.carVisible = false;
      this.$emit("clientForm", this.userInfo);
    },
    //表格单选按钮
    handleCurrentChange (row, oldRow) {
      this.checkRow = row;
    },
    async _getClientById (id) {
      //查询客户详情
      let { success, data } = await getClientById(id);
      let { success: success2, data: data2 } = await findMemberById(id); //查询会员卡信息
      data.member = data2; // 会员卡信息
      data.discountInterval = this.comeputDisconut(data2); //折扣区间
      this.userInfo = data;
      if (this.singleChoice && "cars" in data && data.cars.length > 1) {
        this.tableData = this.userInfo.cars;
        this.carVisible = true;
      } else {
        this.$emit("clientForm", this.userInfo);
      }
    },
    //计算折扣区间
    comeputDisconut (value) {
      let { hoursDiscount, partsDiscount } = value;
      return {
        projectDiscount: { max: 10, min: hoursDiscount },
        partsDiscount: { max: 10, min: partsDiscount },
      }
      /**杨明超  20210401  田汉需求  取消员工折扣  */
      // let { projectDiscount, partsDiscount: partsDiscount2 } = JSON.parse(
      //   sessionStorage.getItem("login")
      // );
      // return {
      //   projectDiscount: this.comparisonSize(hoursDiscount, projectDiscount),
      //   partsDiscount: this.comparisonSize(partsDiscount, partsDiscount2),
      // };
    },
    comparisonSize (v1 = 0, v2 = 0) {
      return v1 >= v2 ? { max: v1, min: v2 } : { max: v2, min: v1 };
    },
    //搜索方法
    querySearch (queryString, callback) {
      // this.loading=true;
      clientSelect(queryString).then((res) => {
        let { success, data = [] } = res;
        let arry = [];
        data.map((item) => {
          let t = item.data.split('_');
          arry.push({
            ...item,
            name: t[0],
            phone: t[1],
            custmerType: t[2],
          })

        })
        // this.loading=false;
        success && callback(arry);
      });
    },

    handleSelect (value) {
      //TODO 格式化显示值
      this._getClientById(value.clientId);
    },
    handleDataInsert () {
      this.visible = true;
    },
    carVisibledialogClose () {
      this.carVisible = false;
    },
    dialogClose () {
      this.visible = false;
    },
    clientForm (params) {
      this.visible = false;
      this._getClientById(params.id)
      // this.$emit("clientForm", params);
    },
    handleClose () {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogClose();
        })
        .catch((_) => { });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__header {
  padding: 0;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: #66b1ff;
  color: #fff;
}
.inline-input {
  min-width: 350px;
}
</style>
